<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>API请求录制器</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="warning">
      <span class="warning-text">⚠️ <strong>先开启此插件再重新打开devTools，否则可能无法正常采集responseBody</strong></span>
    </div>
    
    <div class="settings">
      <div class="setting-group">
        <label for="url-filter">URL过滤 (只录制匹配的URL):</label>
        <input type="text" id="url-filter" placeholder="输入URL过滤字符串">
      </div>
      
      <div class="setting-group">
        <label for="url-blacklist">URL黑名单 (排除匹配的URL):</label>
        <textarea id="url-blacklist" placeholder="每行输入一个URL黑名单项"></textarea>
      </div>
    </div>
    
    <div class="controls">
      <button id="start-recording" class="primary-btn">开始录制</button>
      <button id="stop-recording" class="secondary-btn" disabled>停止录制</button>
      <button id="clear-results" class="danger-btn">清空结果</button>
      <button id="export-data" class="primary-btn">导出数据</button>
    </div>
    
    <div class="results">
      <div class="results-header">
        <h3>录制结果</h3>
        <span id="results-count" class="results-count">共录制了0条数据</span>
      </div>
      <div id="results-list"></div>
    </div>
    
    <div id="detail-view" class="hidden">
      <div class="detail-header">
        <button id="close-detail" class="secondary-btn">返回</button>
        <h3>接口详情</h3>
        <button id="delete-item-detail" class="danger-btn">删除此条</button>
      </div>
      <div class="detail-content">
        <div class="detail-section">
          <h4>URL</h4>
          <pre id="detail-url"></pre>
        </div>
        <div class="detail-section">
          <h4>请求参数</h4>
          <pre id="detail-request"></pre>
        </div>
        <div class="detail-section">
          <h4>响应结果</h4>
          <pre id="detail-response"></pre>
        </div>
      </div>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 